import React, { Component } from 'react';
import '../styles/MyTabbar.scss'








class MyTabbar extends Component {
    constructor(props){
        super(props);
        this.state = { 
            currentIndex:1,
            list:[
                { pic:'iconfont icon-dianpu',text:'店铺' },
                { pic:'iconfont icon-fenlei',text:'分类' },
                { pic:'iconfont icon-quanbu',text:'全部商品'},
                { pic:'iconfont icon-gouwuche',text:'购物车'},
                { pic:'iconfont icon-gerenzhongxin',text:'个人中心'},
            ]
        }
    }
    handleClick(index){
        this.setState({ currentIndex: index })
    }
    render() {
        return (
            <div className='tabbar'>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <div className={ 'item ' + (this.state.currentIndex == index ? 'active' : '') } key={index} onClick={()=>{ this.handleClick(index) }}>
                                <div className={item.pic}></div>
                                <div className="text">{item.text}</div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default MyTabbar;